<template>
  <div class="app-container">
    <el-card shadow="never">
      <template slot="header">
        <strong>总体环境监测</strong>
      </template>
      <template>
        <h3 class="title">光照强度</h3>
        <ve-line :data="chartData1" class="chart"></ve-line>
      </template>

      <template>
        <h3 class="title">土壤ph值</h3>
        <ve-line :data="chartData2" class="chart"></ve-line>
      </template>

      <template>
        <h3 class="title">土壤温度</h3>
        <ve-line :data="chartData3" class="chart"></ve-line>
      </template>

      <template>
        <h3 class="title">土壤湿度</h3>
        <ve-line :data="chartData4" class="chart"></ve-line>
      </template>

      <template>
        <h3 class="title">空气温度</h3>
        <ve-line :data="chartData5" class="chart"></ve-line>
      </template>

      <template>
        <h3 class="title">空气湿度</h3>
        <ve-line :data="chartData6" class="chart"></ve-line>
      </template>

      <template slot="footer"></template>
    </el-card>
  </div>
</template> 

<script>
// v-chart
// import VCharts from "v-charts";
// import Vue from "vue";
// Vue.use(VCharts);

export default {
  data: function() {
    // this.chartSettings = {
    //   xAxisType: 'value'
    // }
    return {
      chartData1: {
        columns: ["日期", "光照强度均值(Lux)"],
        rows: [
          { 日期: "1月", "光照强度均值(Lux)": 55056 },
          { 日期: "2月", "光照强度均值(Lux)": 44853 },
          { 日期: "3月", "光照强度均值(Lux)": 54655 },
          { 日期: "4月", "光照强度均值(Lux)": 57064 },
          { 日期: "5月", "光照强度均值(Lux)": 69532 },
          { 日期: "6月", "光照强度均值(Lux)": 113200 },
          { 日期: "7月", "光照强度均值(Lux)": 100122 },
          { 日期: "8月", "光照强度均值(Lux)": 99543 },
          { 日期: "9月", "光照强度均值(Lux)": 93812 },
          { 日期: "10月", "光照强度均值(Lux)": 65467 },
          { 日期: "11月", "光照强度均值(Lux)": 65443 },
          { 日期: "12月", "光照强度均值(Lux)": 56325 }
        ]
      },
      chartData2: {
        columns: ["日期", "土壤ph均值"],
        rows: [
          { 日期: "1月", 土壤ph均值: 6.4 },
          { 日期: "2月", 土壤ph均值: 6.4 },
          { 日期: "3月", 土壤ph均值: 6.7 },
          { 日期: "4月", 土壤ph均值: 7 },
          { 日期: "5月", 土壤ph均值: 6.9 },
          { 日期: "6月", 土壤ph均值: 7.1 },
          { 日期: "7月", 土壤ph均值: 6.5 },
          { 日期: "8月", 土壤ph均值: 7.2 },
          { 日期: "9月", 土壤ph均值: 6.4 },
          { 日期: "10月", 土壤ph均值: 6.6 },
          { 日期: "11月", 土壤ph均值: 7.2 },
          { 日期: "12月", 土壤ph均值: 7 }
        ]
      },
      chartData3: {
        columns: ["日期", "土壤温度均值(℃)"],
        rows: [
          { 日期: "1月", "土壤温度均值(℃)": 12 },
          { 日期: "2月", "土壤温度均值(℃)": 13 },
          { 日期: "3月", "土壤温度均值(℃)": 18 },
          { 日期: "4月", "土壤温度均值(℃)": 22 },
          { 日期: "5月", "土壤温度均值(℃)": 26 },
          { 日期: "6月", "土壤温度均值(℃)": 30 },
          { 日期: "7月", "土壤温度均值(℃)": 32 },
          { 日期: "8月", "土壤温度均值(℃)": 33 },
          { 日期: "9月", "土壤温度均值(℃)": 26 },
          { 日期: "10月", "土壤温度均值(℃)": 23 },
          { 日期: "11月", "土壤温度均值(℃)": 18 },
          { 日期: "12月", "土壤温度均值(℃)": 12 }
        ]
      },
      chartData4: {
        columns: ["日期", "土壤湿度均值(%RH)"],
        rows: [
          { 日期: "1月", "土壤湿度均值(%RH)": 67 },
          { 日期: "2月", "土壤湿度均值(%RH)": 76 },
          { 日期: "3月", "土壤湿度均值(%RH)": 88 },
          { 日期: "4月", "土壤湿度均值(%RH)": 84 },
          { 日期: "5月", "土壤湿度均值(%RH)": 79 },
          { 日期: "6月", "土壤湿度均值(%RH)": 80 },
          { 日期: "7月", "土壤湿度均值(%RH)": 89 },
          { 日期: "8月", "土壤湿度均值(%RH)": 88 },
          { 日期: "9月", "土壤湿度均值(%RH)": 78 },
          { 日期: "10月", "土壤湿度均值(%RH)": 75 },
          { 日期: "11月", "土壤湿度均值(%RH)": 80 },
          { 日期: "12月", "土壤湿度均值(%RH)": 65 }
        ]
      },
      chartData5: {
        columns: ["日期", "空气温度均值(℃)"],
        rows: [
          { 日期: "1月", "空气温度均值(℃)": 14 },
          { 日期: "2月", "空气温度均值(℃)": 15 },
          { 日期: "3月", "空气温度均值(℃)": 18 },
          { 日期: "4月", "空气温度均值(℃)": 22 },
          { 日期: "5月", "空气温度均值(℃)": 26 },
          { 日期: "6月", "空气温度均值(℃)": 28 },
          { 日期: "7月", "空气温度均值(℃)": 30 },
          { 日期: "8月", "空气温度均值(℃)": 30 },
          { 日期: "9月", "空气温度均值(℃)": 27 },
          { 日期: "10月", "空气温度均值(℃)": 25 },
          { 日期: "11月", "空气温度均值(℃)": 19 },
          { 日期: "12月", "空气温度均值(℃)": 16 }
        ]
      },
      chartData6: {
        columns: ["日期", "空气湿度均值(%RH)"],
        rows: [
          { 日期: "1月", "空气湿度均值(%RH)": 30 },
          { 日期: "2月", "空气湿度均值(%RH)": 36 },
          { 日期: "3月", "空气湿度均值(%RH)": 38 },
          { 日期: "4月", "空气湿度均值(%RH)": 34 },
          { 日期: "5月", "空气湿度均值(%RH)": 39 },
          { 日期: "6月", "空气湿度均值(%RH)": 40 },
          { 日期: "7月", "空气湿度均值(%RH)": 44 },
          { 日期: "8月", "空气湿度均值(%RH)": 41 },
          { 日期: "9月", "空气湿度均值(%RH)": 48 },
          { 日期: "10月", "空气湿度均值(%RH)": 43 },
          { 日期: "11月", "空气湿度均值(%RH)": 40 },
          { 日期: "12月", "空气湿度均值(%RH)": 37 }
        ]
      }
    };
  }
};
</script>

<style>
.chart {
  margin-left: 15%;
  margin-right: 15%;
}
.title {
  margin-left: 16%;
}
</style>